Ja, moin. Laut genug auch für die hinten?

Okay. Mehr so? Mehr so? So kann es gehen?

Nee, jetzt gehst du weg.

Das hättest du wohl gerne, oder?

Okay. Styleguides für alle. Heißt also für alle Projekte, für alle Seiten geht auch für kleine Geschichten. Denke ich. Mal gucken, ob ich euch überzeugen kann.

Das wäre das gewesen, was Daniel netterweise schon erzählt hat. In der Kurzform. Insbesondere vielleicht, wenn jemand noch Fragen hat und mich nahehandig erwischt. Einfach über Twitter. Geht immer gut.

Was ist überhaupt ein Styleguide? Stellen wir uns erstmal ganz dumm. Gibt es ein deutsches Wort dafür, habe ich mir überlegt. In der Vorbereitung gibt es natürlich ein schönes, altbackenes Gestaltungsrichtlinie.

Klingt gleich irgendwie nach verstaubten Aktendeckeln.

Ein Styleguide ist ein Dokument, das beschreibt, wie bestimmte Elemente eines oder mehrerer Kommunikationsmittel, um es mal total generisch zu halten, zu gestalten sind. Da kommt die Aktendeckel wieder durch.

Kommunikationsmittel könnte also theoretisch alles sein. Könnte Print sein, könnte Webseiten sein, könnte alles, was Unternehmen so haben, um sich zu präsentieren.

Das Ziel der Sache ist es, ein einheitliches Erscheinungsbild zu gewährleisten. Also dazu beizutragen, das ist natürlich nicht alles, was die Corporate Identity ausmacht. Klar, aber es gehört dazu.

Und wir wollen eine verbesserte Kommunikation erreichen über diese Kommunikationsmittel, indem wir standardisierte Bausteine konsistent gestalten.

Kommunikation heißt zum Beispiel auch, dass wir einfach sagen können, das ist unser Styleguide. Da kannst du sehen, wie soll zum Beispiel jetzt was weiß ich, ein Blockquote aussehen, weil da nachher noch ein Beispiel kommen wird.

Es gibt irre viele Dinge, was ein Styleguide sein kann. Markenidentität habe ich schon angedeutet. Die Designsprache geht auch in die Richtung. Kommt ein externer Freelancer rein, hat da noch nie gearbeitet, soll mitkriegen oder neue Mitarbeiter an der Uni, wie arbeiten wir hier.

Kann er dem wie gestalten wir Dinge, kann er dem Styleguide entnehmen, weil das Styleguide gibt ja vor, wie machen wir das. Theoretisch ist aber auch andere Sachen denkbar. Sprach, Textstil.

Da gibt es das Beispiel Mädchen. Mädchen hat eine sehr spezielle Sprache. Das ist so ein bisschen frech, wie sie kommunizieren auf ihren Webseiten, in ihren Newslettern vermutlich und ähnliches.

Auch das kann in einen Styleguide gegossen werden und den Leuten sagen, so sollt ihr Kunden ansprechen. Coding-Steel ist sowas. Jeder, der schon mal irgendwie gedacht hat, ich könnte mal was zu einem Open Source Projekt beitragen, hat vielleicht sowas gefunden, wie diese elendige Diskussion sollen wir jetzt zwei Zeichen einrücken oder vier und sollen wir Spaces nehmen oder Tabs.

Fürchterlicher Krieg, Geschichten wie, wie möchten wir das Pull Request geschickt werden, wie möchten wir das Issues formuliert werden. GitHub hat auch neulich irgendwie was neu, dass man jetzt Vorlagen für anlegen kann, wie Issues angelegt werden sollen.

Auch das ist ja letztlich ein Styleguide. Wer sich links merken möchte, braucht sich nur diesen merken. Das ist der eine Link. Styleguides.io von Anna Debenheim und Brad Frost ist eine unfassbare Ressourcensammlung.

Alles, was ich hier erzähle, ist da drin. Garantiert. Da gibt es Sammlungen für Styleguides. Wer sich mal Beispiele angucken möchte. Ich muss davor warnen, weil da kann man locker mal einen Tag mit verbrennen.

Es gibt ellenlange Listen, wie andere Leute Styleguides gemacht haben und wie gesagt, Styleguides.io, da steht alles.

Kurze Evolution des Styleguides. Das kann man gar nicht wirklich. Ich hab überlegt, gibt es irgendwo was, wer eine Geschichte niedergeschrieben hat, wer hat den ersten Styleguide gemacht.

Nicht wirklich zu finden, aber angefangen hat es mit Prinz Styleguides.

Das haben bestimmt der eine oder andere von den Kollegen schon mal gesehen, irgendwo bei einer Firma. Und alles PDF, was seit Jahren auf dem FTP Server liegt. Meistens ist da drin gar nicht viel, sondern einfach einmal das Logo.

Also das Logo, wie es aussah, bevor der Kunde dreimal gesagt hat, mach es bitte größer. Und eine Schriftprobe der Hausschrift, weil die war teuer.

Gerne dann nochmal so eine Farbpalette mit acht schön harmonisch aufeinander abgestimmten Pantonefarben, mit denen wir nichts anfangen können, weil wir ja was anderes brauchen, aber da konnte keiner ahnen.

Dann kamen wir Webfooties und haben gesagt, lass uns das doch in HTML machen. Denn am Ende, sagt Jens immer so schön, ist doch alles HTML.

Also bauen wir doch gleich den ganzen Styleguide mit HTML, CSS, legen ihn ins Internet, fertig.

Das Problem ist, sowas ist natürlich lästig zu warten, wenn es einfach nur eine HTML Seite ist, die einer von Hand geschrieben hat.

Und außerdem ist es ja so, immer wenn jemand HTML und CSS von Hand schreiben will, sitzt zufällig ein Programmierer im Raum und sagt, da kann ich einen Generator für schreiben.

Und so sind wir bei den Living Styleguides gelandet, die über verschiedenartige Generatoren erzeugt werden können, vor allen Dingen eben regelmäßig.

Immer freitags, wenn Deployment ist, warum auch immer man das immer freitags macht, ich finde es immer eine ganz blöde Idee, Freitag, aber gut.

Macht hinterher nochmal einer den Styleguide frisch, damit wir am letzten Stand sind, kann man auch automatisieren.

Aber auch das ist noch nicht das Ende, denn das ist das, an dem ich mich wahrscheinlich gleich fürchterlich versprechen werde.

Styleguide Driven Development mit einer Pattern Library.

Total, aber das ist jetzt das Ende, das erste nehme ich an, der Evolution.

Das heißt, wir haben eine Bibliothek aus Mustern, aus Bausteinen, aus denen wir später unsere Websites, unsere Applikationen zusammenbauen.

Und der Witz an Styleguide Driven, ich sagte ja, es ist schwer, der Witz daran ist, wir drehen es jetzt im Prinzip um.

Wir haben nicht mehr den Styleguide als Nachklapp, wir haben jetzt eine Woche entwickelt und jetzt machen wir mal den Styleguide frisch.

Aber nee, wir fangen mit dem Styleguide an. Wir nehmen den Styleguide als Ausgangspunkt der Gestaltung, der Entwicklung.

Wir bauen nicht mehr erst die Webseite und erzeugen dann parallel dazu einen Styleguide, sondern wir gestalten im Styleguide.

Warum? Was soll der Blödsinn?

Warum ist das dafür, wie wir heute, bestimmt nicht immer, Tom guckt schon, als wollte er Fragen stellen oder Einwände haben,

aber natürlich entwickeln wir nicht immer so, wie ich es gleich beschreiben werde.

Der kleine Freelancer, der alleine im Homeoffice arbeitet, sagt vielleicht Styleguide ist so ein Blödsinn, das teilt mir keiner.

Agil machen die sowieso nicht und den ganzen Quatsch, aber im Prinzip Styleguide-driven-Development ist auf eine gewisse Art Mobile-First.

Jetzt wollte ich darauf verweisen, was Gerrit van Aken schon erzählt hat dazu, aber der ist leider nicht da gewesen.

Als es anfing mit dem Mobile-First, weiß nicht, wie es euch ging, mein größtes Problem damit war dieses Umdenken.

Nicht mehr mit wir fangen an, wie es auf dem Desktop-Browser aussieht, und dann überlegen wir mal,

was machen wir auf kleineren Bildschirmen weniger. Tom gestern, Progressive Enhancement, wir fangen jetzt von unten an.